<template>
  <el-card>
    <template v-slot:header><h1 class="card-title">添加用户</h1></template>

    <!-- 
      1. 收集表单数据
        v-model
      2. 定义表单校验
        定义model：表单要使用的数据
        定义rules：表单校验的规则
        将rules传递给form表单
        form-item通过prop属性来决定哪个rules规则对其生效
        注意：
          表单数据user 和 表单规则 rules 里面的字段必须一致
            不一致的话，校验rules时，就找不到数据
     -->
    <el-form
      label-width="80px"
      class="save-user-form"
      :rules="rules"
      :model="user"
      ref="saveUserForm"
    >
      <el-form-item label="用户名" prop="username">
        <el-input v-model="user.username" />
      </el-form-item>
      <el-form-item label="用户昵称" prop="nickname">
        <el-input v-model="user.nickname" />
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input type="password" v-model="user.password" />
      </el-form-item>
      <el-form-item label="确认密码" prop="rePassword">
        <el-input type="password" v-model="user.rePassword" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submit" class="btn">提交</el-button>
        <router-link to="/user"><el-button>取消</el-button></router-link>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script>
import { reqSaveUser } from "../../../api/users";

export default {
  name: "SaveUser",
  data() {
    return {
      user: {
        username: "",
        nickname: "",
        password: "",
        rePassword: "",
      },
      rules: {
        // key是规则名称：往往和数据一致
        // value是规则详情
        username: [
          // {
          //   min: 4,
          //   max: 16,
          //   message: "用户名长度是4-16位",
          //   // trigger: "blur",
          // },
          // {
          //   pattern: /^[a-zA-Z0-9_]*$/,
          //   message: "用户名只能包含英文、数字和下划线",
          //   // trigger: "blur",
          // },
          {
            validator: this.usernameValidator,
          },
        ],
        nickname: [
          // {
          //   min: 2,
          //   max: 10,
          //   message: "用户昵称长度是2-10位",
          //   // trigger: "blur",
          // },
          {
            validator: this.nicknameValidator,
          },
        ],
        password: [
          // {
          //   min: 4,
          //   max: 16,
          //   message: "密码长度是4-16位",
          //   trigger: "blur",
          // },
          // {
          //   pattern: /^[a-zA-Z0-9_]*$/,
          //   message: "密码只能包含英文、数字和下划线",
          //   trigger: "blur",
          // },
          {
            validator: this.passwordValidator,
          },
        ],
        rePassword: [
          {
            // 自定义校验规则
            validator: this.validator,
            // trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    // 提交表单的方法
    submit() {
      // 手动校验表单
      // 校验通过才能发送请求
      this.$refs.saveUserForm.validate(async (valid) => {
        if (valid) {
          try {
            // console.log("表单校验通过", this.user);
            const { username, nickname, password } = this.user;
            // 请求添加数据
            await reqSaveUser({
              username,
              nickname,
              password,
            });
            // 跳转到User
            this.$router.history.push("/user");

            this.$message({
              type: "success",
              message: "添加用户成功~",
            });
          } catch (e) {
            this.$message({
              type: "error",
              message: e,
            });
          }
        }
      });
    },
    validator(rule, value, callback) {
      if (this.user.password === value) {
        callback();
        return;
      }

      callback("两次密码输入不一致");
    },
    usernameValidator(rule, value, callback) {
      if (/^[a-zA-Z0-9_]{4,16}$/.test(value)) {
        callback();
        return;
      }

      callback("用户名只能包含英文、数字和下划线，长度为4-16位");
    },
    nicknameValidator(rule, value, callback) {
      if (/^[a-zA-Z0-9_]{2,16}$/.test(value)) {
        callback();
        return;
      }

      callback("用户昵称只能包含英文、数字和下划线，长度为2-16位");
    },
    passwordValidator(rule, value, callback) {
      if (/^[a-zA-Z0-9_]{4,16}$/.test(value)) {
        callback();
        return;
      }

      callback("密码只能包含英文、数字和下划线，长度为4-16位");
    },
  },
};
</script>

<style>
.save-user-form {
  width: 400px;
}
button.btn {
  margin-right: 20px;
}
</style>